<template>
  <div class="padding-10-px layout-center-top" style="width: 400px;font-size: 16px;">
    <a-avatar icon="user" :size="108" /><br/>
    <div class="layout-center margin-top-20"><span class="FormSpan">姓名</span><span class="formInput">{{userData.name}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">学号</span><span class="formInput">{{userData.code}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">身份证号</span><span class="formInput">{{userData.idCard}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">身份类别</span><span class="formInput">{{userData.userType}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">性别</span><span class="formInput">{{userData.gender}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">用户类别</span><span class="formInput">{{userData.armyType}}</span></div>
    <div class="layout-center margin-top-20"><span class="FormSpan">联系方式</span><span class="formInput">{{userData.phone}}</span></div>
    <div class="layout-center margin-top-20" v-if="updatePassword"><span class="FormSpan">原密码</span><a-input class="formInput"/></div>
    <div class="layout-center margin-top-20" v-if="updatePassword"><span class="FormSpan">新密码</span><a-input class="formInput"/></div>
    <div class="layout-center margin-top-20" v-if="updatePassword"><span class="FormSpan">确认密码</span><a-input class="formInput"/></div>
  </div>
</template>

<script>
  import {Avatar,Input,Button} from "ant-design-vue"
  export default {
    name: "UserForm",
    components: {
      AAvatar:Avatar,
      AInput:Input,
      AButton:Button
    },
    props:{
      userData:{
        type:Object,
      },
      updatePassword:{
        type: Boolean,
      }
    },
    data(){
      return{
        updateP:false,
      }
    },
    // watch:{
    //
    // },
    mounted() {
      // this.updateP = this.updatePassword;
      console.log(this.userData)
    }
  }
</script>

<style scoped>
  .FormSpan{
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }

  .formInput{
    width: 180px;
  }
  .margin-top-20{
    margin-top: 20px;
  }
</style>